<template>
  <div class="box">
    <h1 class="p-30 fs-36">A组件----组合式API,{{num}}</h1>
    <van-button type="success" @click="handleMinus">数字--</van-button>
    <div v-for="(item,index) in filterGoods" :key="index">
      名称:{{item.name}}
      价格:{{item.price}}
      库存:{{item.n}}
    </div>
  </div>
</template>

<script setup>
import { computed } from "@vue/runtime-core";
import {useStore} from 'vuex'
import {detailGet} from '@/api/goods'
let store = useStore()  //此处的store等同于this.$store
let num = computed(()=>{
  return store.state.count.num
})
let handleMinus = ()=>{
  store.commit('count/minus',5)
}

let goods = computed(()=>{ //在组件中过滤数据【复用性较差】
  return store.state.goods.goods.filter(item=>{
    return item.price>500
  })
})

let filterGoods = computed(()=>{
  return store.getters['goods/filterGoods']
})
</script>

<style lang="less" scoped>
.box{
  width: 50%;
  height: 500px;
  float: left;
  box-sizing: border-box;
  border: 1px solid #333;
}
</style>